<%--
  Created by IntelliJ IDEA.
  User: KangFaWei
  Date: 2019/7/13
  Time: 13:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>


<section>
    <div>
        <select id="province" style="width: 100px">
            <c:forEach items="${requestScope.provinces}" var="province">
                <option value="${province.id}">${province.name}</option>
            </c:forEach>
        </select>
        <select id="city" style="width: 100px;">

        </select>
    </div>
    <div class="wrap">
        <div id="main" style="width: 600px;height:400px;"></div>
    </div>

</section>
<script src="<%=path%>/static/js/jquery-3.3.1.min.js"></script>
<script src="<%=path%>/static/js/echarts.min.js"></script>
<script>

    function getData(garbageId,cityId){
        var times = new Array();
        var outData = new Array();
        var recycleData = new Array();

        $.ajax({
            url:"<%=path%>/web/garbage/data",
            type:"post",
            dataType:"JSON",
            async:false,
            data:{garbageId:garbageId,cityId:cityId},
            success:function (jsonData) {

               for (var data in jsonData){
                   times.push(jsonData[data].time);
               }
                for (var data in jsonData){
                    outData.push(jsonData[data].outData);
                }
                for (var data in jsonData){
                    recycleData.push(jsonData[data].recycleData);
                }
                var myChart = echarts.init(document.getElementById('main'));
                option = {
                    title: {
                        text: '近12个月垃圾回收统计',
                        subtext: '数据来自企业上传'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['释放量','回收量']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            dataView: {readOnly: false},
                            magicType: {type: ['line', 'bar']},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    xAxis:  {
                        type: 'category',
                        boundaryGap: false,
                        data: times,
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} 吨'
                        }
                    },
                    series: [
                        {
                            name:'垃圾释放量',
                            type:'line',
                            data:outData,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name:'垃圾回收量',
                            type:'line',
                            data:recycleData,
                            markPoint: {
                                data: [
                                    {name: '最低', value: -2, xAxis: 1, yAxis: -1.5}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'},
                                    [{
                                        symbol: 'none',
                                        x: '90%',
                                        yAxis: 'max'
                                    }, {
                                        symbol: 'circle',
                                        label: {
                                            normal: {
                                                position: 'start',
                                                formatter: '最大值'
                                            }
                                        },
                                        type: 'max',
                                        name: '最高点'
                                    }]
                                ]
                            }
                        }
                    ]
                };

                myChart.setOption(option);
            }
        })
    }

    function getCities(province){
        $.ajax({
            url:"<%=path%>/web/city/findCities",
            data:{pid:province},
            async:false,
            success:function (data) {
                $("#city").empty();
                $(data).each(function () {
                    $("#city").append("<option value="+this.id+">"+this.name+"</option>");
                })
            }
        })
    }

    $(function () {
        var garbageId = ${param.id};
        getCities(110000);
        var cityId =
        $("#province").change(function () {
            var province = $(this).val();
            getCities(province);
            var cityId = $("#city").val();
            getData(garbageId,cityId);
        })

        $("#city").change(function () {
            var cityId = $(this).val();
            getData(garbageId,cityId);
        })

        getData(garbageId,110100);
    })


</script>